<%--
  Created by IntelliJ IDEA.
  User: wk
  Date: 2020/5/11
  Time: 19:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css">
<style type="text/css">
    .layui-table-cell{ text-align: center; height: auto; white-space: normal; }
</style>
<script>
    function myTable(){
        layui.table.render({
            elem: '#roleTable' //指定原始表格元素选择器（推荐id选择器）
            ,page:true
            ,url:'${pageContext.request.contextPath}/role/findByPage'
            ,cols: [[
                {field:'roleId',title:'ID'},
                {field:'roleName',title:'角色名',templet:function (d) {
                        return d.roleName=='admin'?"管理员":"超级管理员"
                    }},
                {title:'操作',templet:"#caozuoTpl",align:"center"}
            ]] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
    }
    layui.use(['element','jquery','table','upload','form'], function() {
        element = layui.element;
        var table = layui.table;
        var upload = layui.upload;
        var form = layui.form;
        myTable();
    })


</script>
<script>
    var table ;
    var form;
    var layer;
    var element;
    layui.use(['element','jquery','table','layer','form'], function() {
        element = layui.element;
         table = layui.table;
        form = layui.form;
        layer = layui.layer;

        //表单修改
        form.on('submit(updateAdmin)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            $.ajax({
                url:"${pageContext.request.contextPath}/admin/update",
                data:data.field,
                type:"POST",
                success:function (data) {
                    layer.msg(data.data, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                        // 关闭弹出层
                        layer.closeAll();
                        //刷新表格
                        table.reload("adminTable")
                        $("#updateAdmin")[0].reset();
                        table.render();
                    });
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //表单添加
        form.on('submit(addAdmin)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            $.ajax({
                url:"${pageContext.request.contextPath}/admin/add",
                data:data.field,
                type:"POST",
                success:function (data) {
                    layer.msg(data.data, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                        // 关闭弹出层
                        layer.closeAll();
                        //刷新表格
                        table.reload("adminTable")
                        $("#addAdmin")[0].reset();
                        table.render();
                    });
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    })

    //删除
    function remove(id){
        layer.confirm("确认删除吗", {icon: 3, title:'确认框'}, function(index){
            $.ajax({
                url:"${pageContext.request.contextPath}/admin/remove",
                data:{id:id},
                type:"POST",
                success:function (data) {
                    layer.msg(data.data, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                        // 关闭弹出层
                        layer.closeAll();
                        //刷新表格
                        table.reload("adminTable")
                        table.render();
                    });
                }
            })
        })
    }

    //打开添加页面
    function toAdd() {
        layer.open({
            type:1,
            title:'添加',
            content: $('#addAdmin'),
            area:['800px','600px'],
            anim:5
        });
    }

    //打开修改页面
    function toUpdate(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/admin/findOne",
            data:"id="+id,
            success:function (data) {
                    layui.form.val("updateAdmin",data.data);
                    //打开弹出层
                    layui.layer.open({
                        type:"1",
                        title:"修改弹出层",
                        content:$("#updateAdmin"),
                        area:['800px','600px']
                    })
                }
        })
    }

</script>

<!-- 弹出层==>添加页面开始-->
<form style="display: none;margin: 20px"  id="addAdmin" lay-filter="addAdmin" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addAdmin">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->

<!-- 弹出层==>修改页面开始-->
<form style="display: none;margin: 20px"  id="updateAdmin" lay-filter="updateAdmin" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="hidden" name="id">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateAdmin">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->

<!-- 工具栏开始-->

<!-- 工具栏结束-->
<!--操作模板 -->
<script type="text/html" id="caozuoTpl">
    <button type="button" class="layui-btn layui-btn-danger" onclick="remove({{d.id}})">删除</button>
    <button type="button" class="layui-btn" onclick="toUpdate({{d.id}})">修改</button>
</script>
<body>
    <table id="roleTable"></table>
</body>
</html>
